import {NextApiRequest} from 'next'
import { ChangeEvent, useState } from 'react';
import styles from './index.module.scss';
import request from '@/service/fetch'
import {prepareConnection}from "@/db/db/index"
import CountDown from "@/components/CountDown";
import { Users } from "@/db/db/entity"
import {Button} from "antd";
import { drizzle } from "drizzle-orm/mysql2";
import mysql from "mysql2/promise";
interface Iprops {
    isShow: boolean;
    onClose: () => void;
}

const Login=(props:Iprops)=>{
    const [form, setForm] = useState({
        phone: '',
        verify: '',
    });
    const [isShowVerifyCode, setIsShowVerifyCode] = useState(false);
    const { isShow = false, onClose } = props;
    const handleGetVerifyCode = () => {
        if (!form?.phone) {
            alert('输入手机号')
            return;
        }
        request.post('/api/user/sendVerifyCode',{
            to: form?.phone,
            templateId: 1,
        }).then((res:any) => {
            if(res?.code===0){
                console.log('aaa')
            }else{
                alert(res?.msg||'未知错误')
            }
        })
    }
    const handleClose = () => {
        onClose && onClose();
    };
    const  handleLogin = async () => {
        const connection = await mysql.createConnection({
            host: "host",
            user: "127.0.0.1",
            password: "aA123456",
            database: "new_schema_test",
        });
        const db = drizzle({ client: connection });
        console.log(db)
        // const response = await db.select().from('users')

    }
    const handleOAuthGithub = () => {
        const githubClientid = 'd26b6141d5ccf60f7ea8';
        const redirectUri = 'http://localhost:3000/api/oauth/redirect';
        window.open(
            `https://github.com/login/oauth/authorize?client_id=${githubClientid}&redirect_uri=${redirectUri}`
        );
    };
    const handleFormChange = (e: ChangeEvent<HTMLInputElement>) => {
        const { name, value } = e.target;
        setForm({
            ...form,
            [name]: value,
        });
    };
    const handleCountDownEnd = () => {

    };
    return isShow ? (
        <div className={styles.loginArea}>
            <div className={styles.loginBox}>
                <div className={styles.loginTitle}>
                    <div>手机号登录</div>
                    <div className={styles.close} onClick={handleClose}>
                        x
                    </div>
                </div>
                <input
                    name="phone"
                    type="text"
                    placeholder="请输入手机号"
                    value={form.phone}
                    onChange={handleFormChange}
                />
                <div className={styles.verifyCodeArea}>
                    <input
                        name="verify"
                        type="text"
                        placeholder="请输入验证码"
                        value={form.verify}
                        onChange={handleFormChange}
                    />
                    <span className={styles.verifyCode} onClick={handleGetVerifyCode}>
                       获取验证码

                 </span>
                </div>
                <div className={styles.loginBtn} onClick={handleLogin}>
                    登录
                </div>
                <div className={styles.otherLogin} onClick={handleOAuthGithub}>
                    使用 Github 登录
                </div>
                <div className={styles.loginPrivacy}>
                    注册登录即表示同意
                    <a
                        href="https://moco.imooc.com/privacy.html"
                        target="_blank"
                        rel="noreferrer"
                    >
                        隐私政策
                    </a>
                </div>
            </div>
        </div>
    ) : null;

}
export default Login
